﻿<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>WorkflowDesigner</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="content-script-type" content="text/javascript" />

    <script type="text/javascript" src="./js/prototype.js"></script>

    <script type="text/javascript" src="./js/colorpicker/colormethods.js"></script>

    <script type="text/javascript" src="./js/colorpicker/colorvaluepicker.js"></script>

    <script type="text/javascript" src="./js/colorpicker/slider.js"></script>

    <script type="text/javascript" src="./js/colorpicker/colorpicker.js"></script>

    <style type="text/css">
        html, body
        {
            height: 100%;
            overflow: hidden;
            font-family: Simsun;
            font-size: 12px;
            font-weight: normal;
            color: #384E73;
        }
        body
        {
            padding: 0;
            margin: 0;
        }
        p
        {
            border: medium none;
            vertical-align: baseline;
            margin: 0px;
            padding-top: 2px;
        }
        .colorpicker
        {
            padding: 10px;
            margin: 0px;
            width: 420px;
            height: 310px;
            position: absolute;
            top: 0px;
            left: 0px;
            visibility: hidden;
        }
        .colorpicker_right
        {
            top: 0px;
            left: 0px;
            margin: 0px;
            float: right;
            position: absolute;
        }
    </style>

    <script type="text/javascript">
        <!--
        var isInited = false;
        function Create() {
            if (!isInited) {
                objCP = new Refresh.Web.ColorPicker('objCP', { startHex: 'FFCC00', startMode: 's' });
            }
            isInited = true;
        }
        function Show(elem) {
            Create();
            var obj = document.getElementById("colorpicker");
            obj.style.visibility = "visible";
            obj.style.top = elem.style.top
            obj.style.left = elem.style.left;
            objCP.setColorMode('s');
            objCP._map.showArraw();
            objCP._slider.showArraw();
        }
        function Hide() {
            Create();
            var obj = document.getElementById("colorpicker");
            obj.style.visibility = "hidden";
            objCP._map.hideArrow();
            objCP._slider.hideArrow();
        }
        //-->
    </script>

</head>
<body>
    <input type="button" onclick="Show(this);" value="AAAAAAA" style="top: 100px; left: 300px;
        position: absolute;" />
    <input type="button" onclick="Show(this);" value="BBBBBBB" style="top: 300px; left: 100px;
        position: absolute;" />
    <div id="colorpicker" class="colorpicker">
        <div class="colorpicker_right">
            <div id="objCP_ColorMap" style="float: left; text-align: left;">
            </div>
            <div id="objCP_ColorBar" style="float: left; text-align: left;">
            </div>
            <div style="float: left; text-align: left;">
                <div id="objCP_Preview" style="background: #fff; width: 80px; height: 80px; border: solid 1px #000;
                    cursor: pointer;" onclick="Hide();alert('objCP_Preview');">
                    确定</div>
                <p>
                    <input type="radio" id="objCP_HueRadio" name="objCP_Mode" value="0" onfocus="this.blur();" />
                    <label for="objCP_HueRadio">
                        H:</label>
                    <input type="text" id="objCP_Hue" value="0" class="text" style="width: 40px;" />&deg;
                </p>
                <p>
                    <input type="radio" id="objCP_SaturationRadio" name="objCP_Mode" value="1" onfocus="this.blur();" />
                    <label for="objCP_SaturationRadio">
                        S:</label>
                    <input type="text" id="objCP_Saturation" value="100" class="text" style="width: 40px;" />%
                </p>
                <p>
                    <input type="radio" id="objCP_BrightnessRadio" name="objCP_Mode" value="2" onfocus="this.blur();" />
                    <label for="objCP_BrightnessRadio">
                        B:</label>
                    <input type="text" id="objCP_Brightness" value="100" class="text" style="width: 40px;" />%
                </p>
                <p>
                    <input type="radio" id="objCP_RedRadio" name="objCP_Mode" value="r" onfocus="this.blur();" />
                    <label for="objCP_RedRadio">
                        R:</label>
                    <input type="text" id="objCP_Red" value="255" class="text" style="width: 40px;" />
                </p>
                <p>
                    <input type="radio" id="objCP_GreenRadio" name="objCP_Mode" value="g" onfocus="this.blur();" />
                    <label for="objCP_GreenRadio">
                        G:</label>
                    <input type="text" id="objCP_Green" value="0" class="text" style="width: 40px;" />
                </p>
                <p>
                    <input type="radio" id="objCP_BlueRadio" name="objCP_Mode" value="b" onfocus="this.blur();" />
                    <label for="objCP_BlueRadio">
                        B:</label>
                    <input type="text" id="objCP_Blue" value="0" class="text" style="width: 40px;" />
                </p>
                <p>
                    &nbsp;#:&nbsp;<input type="text" id="objCP_Hex" value="FF0000" class="text" style="width: 60px;" />
                </p>
            </div>
            <div style="display: none;">
                <!-- 预先加载图片，提升打开速度，增强用户体验 -->
                <img src="./js/colorpicker/images/rangearrows.gif" />
                <img src="./js/colorpicker/images/mappoint.gif" />
                <img src="./js/colorpicker/images/bar-saturation.png" />
                <img src="./js/colorpicker/images/bar-brightness.png" />
                <img src="./js/colorpicker/images/bar-blue-tl.png" />
                <img src="./js/colorpicker/images/bar-blue-tr.png" />
                <img src="./js/colorpicker/images/bar-blue-bl.png" />
                <img src="./js/colorpicker/images/bar-blue-br.png" />
                <img src="./js/colorpicker/images/bar-red-tl.png" />
                <img src="./js/colorpicker/images/bar-red-tr.png" />
                <img src="./js/colorpicker/images/bar-red-bl.png" />
                <img src="./js/colorpicker/images/bar-red-br.png" />
                <img src="./js/colorpicker/images/bar-green-tl.png" />
                <img src="./js/colorpicker/images/bar-green-tr.png" />
                <img src="./js/colorpicker/images/bar-green-bl.png" />
                <img src="./js/colorpicker/images/bar-green-br.png" />
                <img src="./js/colorpicker/images/map-red-max.png" />
                <img src="./js/colorpicker/images/map-red-min.png" />
                <img src="./js/colorpicker/images/map-green-max.png" />
                <img src="./js/colorpicker/images/map-green-min.png" />
                <img src="./js/colorpicker/images/map-blue-max.png" />
                <img src="./js/colorpicker/images/map-blue-min.png" />
                <img src="./js/colorpicker/images/map-saturation.png" />
                <img src="./js/colorpicker/images/map-saturation-overlay.png" />
                <img src="./js/colorpicker/images/map-brightness.png" />
                <img src="./js/colorpicker/images/map-hue.png" />
            </div>
        </div>
    </div>
</body>
</html>
